<script setup>
import useTagsViewStore from '@/store/modules/tagsView.js'
import router from '@/router/index'
import { ref } from 'vue'
import { ElMessage } from 'element-plus';
import { getToken } from "@/utils/auth"
import {values} from "vuedraggable/dist/vuedraggable.common.js";
/*** 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/manager/region/addMany"
})
const uploadRef = ref()

const success = ref(0)
const fail = ref(0)

const formData = new FormData()
const action1 = ref( import.meta.env.VITE_APP_BASE_API + "/common/uploads")
const activeStep = ref(1)
const fileRaw = ref(null);
const tagsViewStore = useTagsViewStore()
const { proxy } = getCurrentInstance()
    /**
     * 返回按钮的方法
     */
function backchamber(){
  router.go(-1);
}

/**
 * 下载excel表格按钮方法
 */
function handleExport() {
  proxy.download('manager/region/exportAddMany', {
  }, `行政区划批量新增模版.xlsx`)
}

/**
 * 导出传入失败的数据的Excel表格
 */
function handleExportFail(){
  proxy.download('manager/region/exportAddFail', {
  }, `行政区划批量新增失败.xlsx`)
}

/**
 * 上传文件按钮方法
 */
// const submitUpload = () => {
//   if (!fileRaw.value){
//     ElMessage.warning('请先选择文件！');
//     return;
//   }
//   uploadRef.value.submit()
// }

/** 提交上传文件 */
function submitUpload() {
  proxy.$refs["uploadRef"].submit()
}


/**
 * 选择文件后回调函数
 * @param file
 */
function handleFileChange(file){
  fileRaw.value = file.raw;
  console.log(fileRaw.value)
}

/**
 * 上传成功回调函数
 */
function handleSuccess(response){
  console.log(response)
  success.value = response.successCount
  fail.value = response.failCount
  if (response.successCount!=0 && response.failCount === 0){
    ElMessage.warning('上传成功！');
  }else if (response.successCount!=0 && response.failCount!=0){
    ElMessage.warning("部分数据上传成功！")
  }else if (response.failCount!=0 && response.successCount ===0){
    ElMessage.warning("数据上传失败！")
  }
}

/**
 * 上传失败回调函数
 */
function handleError(){
  ElMessage.warning('上传失败，请检查原因！')
}

</script>

<template>
  <div class="container">
    <div class="content">
      <div class="d1" style="display: flex; align-items: center; gap: 8px;">
        <div style="width: 10px;
                    height:30px;
                    background-color: #3DA1FE;
                    border-radius: 15px;
                   "/>
        <p style="font-weight: bold">行政区划管理-批量新增</p>
      </div>
      <div style="display: flex; align-items: center; gap: 10px;">
        <div style="width: 100px;
             height: 40px;
             padding-top: 5px;
             margin-top: 10px;
             margin-bottom: 10px;
             border: 1px solid #3DA1FE;
             border-radius: 50px / 20px;">
          <span style="color: #3DA1FE">步骤一</span>
        </div>
        <span style="font-weight: bold;flex: 1">下载模板，按模板填写数据</span>
        <el-button type="success" @click="handleExport">下载EXCEL</el-button>
      </div>
      <div style="display: flex; align-items: center; gap: 8px;">
        <div style="width: 100px;
             height: 40px;
             padding-top: 5px;
              margin-bottom: 10px;
             border: 1px solid #3DA1FE;
             border-radius: 50px / 20px;">
          <span style="color: #3DA1FE">步骤二</span>
        </div>
        <span style="font-weight: bold;flex: 1;">选择填写好的模板文件</span>
        <el-upload
            ref="uploadRef"
            :headers="upload.headers"
            :action="upload.url + '?updateSupport=' + upload.updateSupport"
            class="upload-demo"
            :auto-upload="false"
            :on-change="handleFileChange"
            :on-success="handleSuccess"
            :on-error="handleError"
        >
          <template #trigger>
            <el-button size="large">选择文件</el-button>
          </template>
        </el-upload>
      </div>

<!--      步骤三的代码-->
      <div style="display: flex; align-items: center; gap: 8px;">
        <div style="width: 100px;
             height: 40px;
             padding-top: 5px;
              margin-bottom: 10px;
             border: 1px solid #3DA1FE;
             border-radius: 50px / 20px;">
          <span style="color: #3DA1FE">步骤三</span>
        </div>
        <span style="font-weight: bold;flex: 1;">点击上传</span>
        <el-button type="primary" @click="submitUpload">上传</el-button>
      </div>

      <hr>
      <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 10px;">
        <div class="d1" style="display: flex; align-items: center; gap: 8px;">
          <div style="width: 10px;
                height:30px;
                background-color: #3DA1FE;
                border-radius: 15px;
               "/>
          <p style="font-weight: bold">上传结果</p>
        </div>
        <div class="d1" ><p style="font-weight: bold;margin-left: 18px">上传成功：<span style="color:#81B337 ">{{success}}</span>条</p></div>
        <div class="d1"><p style="font-weight: bold;margin-left: 18px">上传失败：<span style="color: #BD3124">{{fail}}</span>条</p></div>
        <div class="d1"> <el-button type="primary" style="margin-left: 18px" @click="handleExportFail">下载上传失败文件</el-button></div>
      </div>
    </div>
  <el-button size="large" class="b1" type="primary" round @click="backchamber">返回</el-button>
  </div>
</template>

<style scoped lang="scss">
.b1{
  position: absolute;
  top: 20px;
  right: 20px;
}
.container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
.content{
  width: 500px;
  height: 800px;
  margin-right: 1200px;
  margin-top: 20px;
}

.d1{
  height: 50px;
}


</style>